<template>
  <div style="margin: 0 auto;max-width: 70%;margin-top: 70px;">
    <div :style="[{height:clientHeight},{width:'15%'},{float:'left'},{border: '2px solid'}]">
      <el-link :type="commentState === false ? 'default' :'primary'" :underline="false" style="margin-left: 30%;margin-top: 30%" @click="getComment">回复评论</el-link>
      <el-link :type="chatState === false ? 'default' :'primary'" :underline="false" style="margin-left: 30%;margin-top: 30%" @click="getChat">聊天信息</el-link>
    </div>
      <router-view :style="[{height:clientHeight},{overflow:'auto'},{width: '83.2%'},{float:'right'},{border: '2px solid'}]"/>
  </div>
</template>

<script>
export default {
  name: "messageOption",
  data(){
    return{
      commentState:false,
      likeState:false,
      chatState:false,
      clientHeight:0,
      users:{}
    }
  },
  methods:{
    getComment(){
      this.commentState=true;
      this.chatState=false;
      this.$router.push("/messageCenter/comment")
    },
    getChat(){
      this.commentState=false;
      this.chatState=true;
      this.$router.push("/messageCenter/chat")
    },
  },
  watch:{
    '$route.path': {
      handler(toPath){
        if (toPath === '/messageCenter/comment'){
          this.getComment()
        }else if(toPath === '/messageCenter/chat'){
          this.getChat()
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    document.title="消息中心 - 贴乎";
    this.clientHeight = (document.documentElement.clientHeight-96) + 'px';
    window.onresize = () => {
      return (() => {
        this.clientHeight = (document.documentElement.clientHeight-96) + 'px';
      })();
  }
  }
}
</script>

<style scoped>

</style>